<template>
  <div class="share">
    <van-popup class="popup" v-model="show">
      <p>长按图片下载并分享</p>
      <div class="main" v-if="art">
        <h4>{{ art.title }}</h4>
        <div class="user">
          <img :src="baseUrl + art.author.avatar" alt="" />
          <div class="nickname">{{ art.author.nickname }}</div>
        </div>
        <div class="art">{{ art.contentText }}</div>
        <div class="advertising">
          <div></div>
          <img src="@/assets/share.png" alt="" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: ['art'],
  data () {
    return {
      baseUrl: process.env.VUE_APP_URL,
      show: false
    }
  }
}
</script>

<style lang="less" scoped>
.share {
  .popup {
    width: 85%;
    height: 85%;
    background-color: #5abdd6;
    p {
      text-align: center;
      font-size: 12px;
      line-height: 40px;
      color: #fff;
    }
    .main {
      padding: 15px 15px 0;
      position: absolute;
      border-radius: 15px;
      top: 40px;
      left: 12px;
      right: 12px;
      bottom: 20px;
      background-color: #fff;
      overflow: hidden;
      h4 {
        font-size: 18px;
        line-height: 22px;
      }
      .user {
        overflow: hidden;
        // display: flex;
        // align-items: center;
        margin: 20px 8px;
        div {
          display: inline-block;
          font-size: 12px;
          font-weight: 800;
        }
        img {
          float: left;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin-right: 10px;
        }
      }
      .art {
        font-size: 16px;
      }
      .advertising {
        // height: 50px;
        z-index: 5555;
        width: 100%;
        background-color: #fff;
        text-align: center;
        position: absolute;
        left: 0;
        bottom: 0;
        div {
          position: absolute;
          width: 100%;
          top: -50px;
          height: 50px;
          background-image: linear-gradient(rgba(255, 255, 255, 0.1), #fff);
        }
        img {
          height: 200px;
        }
      }
    }
  }
}
</style>
